<template>
  <div class="leftchild2">
    <header>
      <li>
        <router-link to="/"><span>工作台</span></router-link>
      </li>
      &nbsp;
      <li>/</li>
      &nbsp;
      <li>页面管理</li>
    </header>
    <main>
      <div class="top">
        <div class="top-top">
          <a-form
            :model="formState"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-item label="名称：">
              <a-input
                v-model:value="formState.Usename"
                placeholder="请输入页面名称"
              />
            </a-form-item>

            <a-form-item label="路径:">
              <a-input
                v-model:value="formState.url"
                type="textarea"
                placeholder="请输入页面路径"
              />
            </a-form-item>

            <a-form-item label="状态：">
              <a-select v-model:value="formState.region">
                <a-select-option value="已发布">已发布</a-select-option>
                <a-select-option value="草稿">草稿</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </div>
        <div class="top-bottom">
          <div style="width: 240px">
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="onSubmit">搜索</a-button>
              <a-button style="margin-left: 10px" @click="resetting"
                >重置</a-button
              >
            </a-form-item>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="m-top">
          <a-popover>
            <template #content>
              <p color="#fff">刷新</p>
            </template>
            <a href="">
              <a href=""><ReloadOutlined /></a>
            </a>
          </a-popover>
        </div>
        <div class="m-middle">
          <a-table
            :columns="columns"
            :data-source="state.data"
            :row-selection="rowSelection"
          >
            <template #action>
              <span style="color: #7790ff; cursor: pointer" class="a">
                <p><a>编辑</a><a>下线</a></p>
                <a>查看访问</a>
                <a-popconfirm
                  title="确认删除这个标签"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="confirm"
                  @cancel="cancel"
                >
                  <a>删除</a>
                </a-popconfirm>
              </span>
            </template>
          </a-table>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRaw,
  UnwrapRef,
  onMounted,
  ref
} from 'vue'
interface FormState {
  Usename: string
  region: string | undefined
  url: string
}
import { ReloadOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import axios from 'axios'
const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '路径',
    dataIndex: 'path',
    key: 'path'
  },
  {
    title: '顺序',
    dataIndex: 'order',
    key: 'order'
  },
  {
    title: '阅读量',
    dataIndex: 'views',
    key: 'views',
    width: 70
  },
  {
    title: '状态',
    dataIndex: 'row',
    key: 'row',
    width: 70
  },
  {
    title: '发布时间',
    dataIndex: 'updateAt',
    key: 'updateAt'
  },
  {
    title: '操作',
    dataIndex: '操作',
    key: 'address',
    width: 160,
    slots: { customRender: 'action' } //绑定插槽
  }
]
interface DataItem {
  key: number
  type: string
  word: number
  row: string
  children?: DataItem[]
}
const rowSelection = {
  onChange: (
    selectedRowKeys: (string | number)[],
    selectedRows: DataItem[]
  ) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows
    )
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (
    selected: boolean,
    selectedRows: DataItem[],
    changeRows: DataItem[]
  ) => {
    console.log(selected, selectedRows, changeRows)
  }
}
export default defineComponent({
  components: {
    ReloadOutlined
  },
  setup() {
    let state: any = reactive({
      data: []
    })
    onMounted(() => {
      axios.get('https://creationapi.shbwyz.com/api/page').then((res) => {
        let newlist = res.data.data[0].map((item: any, index: number) => {
          return { ...item, key: index }
        })
        state.data = newlist
      })
    })
    const formState: UnwrapRef<FormState> = reactive({
      Usename: '',
      region: undefined,
      url: ''
    })
    const onSubmit = () => {
      console.log('submit!', toRaw(formState))
      const newlist = state.data.filter((item: any) =>
        item.name.includes(formState.Usename)
      )
      state.data = newlist
    }
    let resetting = () => {
      formState.Usename = ''
      formState.url = ''
      ;(formState.region = ''),
        axios.get('https://creationapi.shbwyz.com/api/page').then((res) => {
          let newlist = res.data.data[0].map((item: any, index: number) => {
            return { ...item, key: index }
          })
          state.data = newlist
        })
    }
    const confirm = (e: MouseEvent) => {
      console.log(e)
      message.warning('访客无权进行该操作')
    }
    const cancel = (e: MouseEvent) => {
      console.log(e)
    }
    return {
      formState,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      onSubmit,
      resetting,
      confirm,
      cancel,
      columns,
      state,
      rowSelection
    }
  }
})
</script>

<style lang="scss">
.leftchild2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    height: 20%;
    padding-left: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    border-top: 1px solid #eae2e2;

    li {
      cursor: pointer;
      color: #999;

      span {
        color: #999;
      }
    }
  }
  flex-grow: 1;
  overflow-y: scroll;
  ::-webkit-scrollbar {
    width: 3px;
  }
  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  }
  .top {
    width: 97%;
    height: 120px;
    background: #fff;
    margin: 2% auto;
    padding-top: 20px;

    .top-top {
      height: 50%;
      display: flex;
      align-items: center;

      .ant-form {
        display: flex;
        justify-content: space-around;

        input {
          width: 200px;
        }
      }

      .ant-select-selector {
        width: 200px;
      }

      .ant-select {
        width: 200px;
      }

      .ant-select-arrow {
        float: right;
      }
    }

    .top-bottom {
      display: flex;
      justify-content: flex-end;
    }
  }
  main {
    flex-grow: 1;
    overflow-y: scroll;

    .top {
      width: 97%;
      height: 120px;
      background: #fff;
      margin: 2% auto;
      padding-top: 20px;

      .top-top {
        height: 50%;
        display: flex;
        align-items: center;

        .ant-form {
          display: flex;
          justify-content: space-around;

          input {
            width: 200px;
          }

          .ant-col {
            width: 170px;
          }
        }

        .ant-select-selector {
          width: 200px;
        }

        .ant-select {
          width: 200px;
        }

        .ant-select-arrow {
          float: right;
        }
      }

      .top-bottom {
        display: flex;
        justify-content: flex-end;
      }
    }

    .middle {
      width: 97%;
      background: #fff;
      margin: 3% auto;

      .m-top {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 20px;
        cursor: pointer;
      }

      .m-middle {
        height: 84%;
        .a {
          a {
            margin-right: 8px;
          }
        }
        .ant-table-row {
          td {
            &:nth-child(5) {
              color: green;
            }
          }
        }
      }
    }

    .btn2 {
      margin-left: 13px;
    }
  }
}
</style>
